<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>主页面</title>
		<script src='../public/js/axios.js'></script>
		<script src='../public/js/vue.js'></script>
		<script src='socket.io/socket.io.js'></script>
		<script src='../public/js/jquery3.5.1.min.js'></script>
		<link rel='stylesheet' href='../public/css/personal.css' type='text/css' />
		<link rel='stylesheet' href='../public/css/homePage.css' type='text/css' />
		<link rel='stylesheet' href='../public/css/showAndHide.css' type='text/css' />
		<link rel='stylesheet' href='../public/css/GroupChat.css' type='text/css' />
        
	</head>
	<body>
		<div id='app' class='app'>
			<!-- 主页面 -->
			<div>
		    <header class='header'>
				<span v-text="show">消息</span>
				<span class='iconfont right_1'>&#xe611;</span>
				<span class='iconfont right_2'  ontouchend='goseofriendly()'>&#xe601;</span>
			</header>	
			<div class='news'  v-show='xiaoxi'>
				<div class='word'>
					<ul>
						<a href='http://localhost:9999/GroupChat'>
				            <li class='li_1'>
				        	    <img class='headPortrait' src='../public/img/qunliao.png'>
				        	    <ul class='ul'>
				        		     <li class='name'>多人聊天室</li>
				        		     <li class='newss'>消息</li>
				        	    </ul>
				        	<div class='time'>当前时间</div>
							
				        </li>
						</a>
						<li class='li_1 index' v-for='item in newLists'>
							<img class='headPortrait' :src=item.headSrc>
							<ul class='ul'>
								<li class='name'><em class='em'>{{item.identity}}</em>{{item.name}}</li>
								<li class='newss'>消息</li>
							</ul>
							<!-- <div class='time'>当前时间</div> -->
						</li>
					</ul>
				</div>
			</div>
			<div class="addressList" :class='{"allShow":txl}' v-show='txl'>
				<ul>
					<li ontouchend='goFriendRequest()'><img src='../public/img/newF.png'><span>新的朋友</span><span class='hint-span' v-show='datalist.AddFriend?(datalist.AddFriend.length==0?null:datalist.AddFriend.length):null'>{{datalist.AddFriend?(datalist.AddFriend.length==0?null:datalist.AddFriend.length):null}}</span></li>
					<li><img src='../public/img/qunliao.png'><span>群聊</span></li>
					<li></li>
					<li v-for='item in datalist.friendList' class='a-list'>
						<img :src='item.headSrc'>
						<span>{{item.name}}</span>
						<em class='em'>{{item.identity}}</em>
					</li>
				</ul>
			</div>
			<div class='discover' :class='{"allShow":fa}' v-show='fa'>
				<ul>
					<li ontouchend='goMoments()'>
						<img src='../public/img/word.png'><span>发现世界</span>
						<span>
							
						</span>
						<img  class='right' src='../public/img/you.png'>
					</li>
					<li>
						<img src='../public/img/Friends .png'><span>朋友圈</span><img  class='right' src='../public/img/you.png'>
					</li>
					<li>
						<img src='../public/img/search.png'><span>搜一搜</span><img  class='right' src='../public/img/you.png'>
					</li>
					<li>
						<img src='../public/img/nearby.png'><span>附近</span><img  class='right' src='../public/img/you.png'>
					</li>
					<li>
						<img src='../public/img/take.png'><span>看一看</span><img  class='right' src='../public/img/you.png'>
					</li>
					<li>
						<img src='../public/img/play.png'><span>游戏</span><img  class='right' src='../public/img/you.png'>
					</li>
					<li>
						<img src='../public/img/applet.png'><span>小程序</span><img  class='right' src='../public/img/you.png'>
					</li>
					<li>
						<img src='../public/img/shop.png'><span>购物</span><img  class='right' src='../public/img/you.png'>
					</li>
				</ul>
			</div>
			<div class='my':class='{"allShow":mi}' v-show="mi">
				<ul>
					<li>
						<div>
							<img src='../public/img/head%20portrait.png' class='headsrc'>
						</div>
						<ul>
							<li><b class='nickname'>晴</b></li>
							<li>账号：<span class='accountNumber'>111</span><img src='../public/img/you.png' ontouchend='goPersonal()'></li>
							<li><span class='sapn'>+状态</span><span class='sapn'>•••</span></li>
						</ul>
					</li>
					<li><img src='../public/img/set.png'>设置<img src='../public/img/you.png' class='right' ontouchend='goQuit()'></li>
					<li class='li'><img src='../public/img/collect.png'>收藏<img src='../public/img/you.png' class='right'></li>
				    <li class='li'><img src='../public/img/cardBag.png'>卡包<img src='../public/img/you.png' class='right'></li>
					<li class='li'><img src='../public/img/face.png'>表情<img src='../public/img/you.png' class='right'></li>
			        <li class='li'><img src='../public/img/pay.png'>支付<img src='../public/img/you.png' class='right'></li>
				</ul>
			</div>
			<footer class='footer'>
			   <ul>
				    <li v-on:touchend='xiaoxi_f'>
					   <p><span class='iconfont black' :class='{"green":xiaoxi}'>&#xe602;</span></p>
					   <span class='size' :class='{"green":xiaoxi}'>消息</span>
				    </li>
				    <li v-on:touchend='txl_f()'>
					    <p><span class='iconfont black' :class='{"green":txl}'>&#xe645;</span></p>
					    <span class='size' :class='{"green":txl}'>通讯录</span>
				    </li>
				    <li v-on:touchend='fa_f()'>
					    <p><span class='iconfont black' :class='{"green":fa}'>&#xe604;</span></p>
					    <span class='size' :class='{"green":fa}'>发现</span>
				    </li>
				    <li v-on:touchend='mi_f'>
					    <p><span class='iconfont black' :class='{"green":mi}'>&#xe709;</span></p>
						<span class='size' :class='{"green":mi}'>我</span>
					</li>
			   </ul>
			</footer>
			</div>
			<!-- 朋友圈 -->
			<div calss='Moments' id='Moments'>
				<header class=header>
					<img class='img' src='../public/img/zuo.png' ontouchend='Moments_One()'>
					<div class='showImg'>
						<img src='../public/img/liao.jpg' class='img_2'>
					</div>
					<div class='showPortrait'>
						<span class='left nickname'></span>
						<img class='img_3 headsrc' src='../public/img/head%20portrait.png'>	
					</div>
					<img class='publish' src='../public/img/publish.png' ontouchend='publish()'>
				</header>
				<ul class='ul'>
					<li class='li' v-for='item in momentsnewslist'>
						<img class=' img' :src=item.headsrc>
						<div class='div'>
							<ul>
								<li class='bottom'><span class='blue'>{{item.name}}</span><em class='em'>{{item.identity}}</em></li>
								<li class='bottom'>{{item.pinglun}}</li>
								<li class='bottom'>
								    <ul>
										<li v-for='src in item.img' class='imgli'><img :src='src'></li>
									</ul>
								</li>
								<li class='showtime bottom'><span class='time1'>{{item.time}}</span>
								     <a class='del'></a>
								     <div class='little'>••</div>
									 <div class='like'>
									 	<ul>
									 		<li class='likeli give'><img src='../public/img/love2.png'><span>点赞</span></li>
									 		<li class='likeli discuss'><img src='../public/img/comment.png'>评论</li>
									 	</ul>
									 </div>
								</li>
								<li class='bottom normal bgblue'>
  									<div class='left thumbupbutton' style='float: left;margin-left:0.5rem;' v-for='item_name in item.likelist'><img class='img_name' src='../public/img/love.png'><span>{{item_name.name}}</span></div>
								</li>
								<li>
					
									<div class='commentdiv'>
					                     <textarea class='textarea' v-model='commentsendtext'></textarea>
										 <div class='commentsend commentsend_gray' :class='{"commentsend_green":commentsend_green}'>发送</div>
										 <img src='../public/img/face_h.png' class='commentimg'>
				                    </div>
								</li>
								<li class='bottom bottom-top'>
									<ul>
										<!-- 评论内容 -->
										<li class='comment_list' v-for='data in item.commentlist'>
											<img class='comment_list_head' :src=data.headSrc>
											<div class='comment_list_vessel'>
												<div class='comment-list-name' style='color:blue'><span>{{data.name}}</span><em class='em'>{{item.identity}}</em></div>
												<div class='comment-list-time' style="position:absolute;font-size:20px;top:0;right:0;">{{data.time}}</div>
												<div class='comment-list-news'><span class='list-news-span'>{{data.val}}</span></div>
											</div>
										</li>
									</ul> 
								</li>
							</ul>
							
							
						</div>
					</li>
					
				</ul>
				<footer class="footer_f">
					<ul>
						<li ontouchend='compile_f()'>编辑</li>
						<li>拍摄</li>
						<li>从相册选择</li>
						<li>用秒剪制作视频</li>
						<li ontouchend='MomentsCancel()'>取消</li>
					</ul>
				</footer>
				
				<div class='masklayer'></div>
				<ul class='delmoments' id='delmoments'>
					<li>提示</li>
					<li class='gray'>删除该朋友圈？</li>
					<li>
						<div class='divleft_1 ok'>取消</div>
						<div class='divleft_2 ok'>确定</div>
					</li>
					<li id='check'></li>
				</ul>
				<ul class='delmoments' id='delcomments'>
					<li>提示</li>
					<li class='gray'>删除该评论？</li>
					<li>
						<div class='divleft_1 ok_2'>取消</div>
						<div class='divleft_2 ok_2'>确定</div>
					</li>
					<li id='check'></li>
				</ul>
			</div>
			<!-- 发布消息的编辑页面 -->
			<div class='compile'>
				<ul>
					<li class=li>
						<img src='../public/img/zuo.png' class='left' ontouchend='returnMoments()'>
						<div class='divRight' ontouchend='compileNews()'>发表</div>
					</li>
					<li>
						<textarea></textarea>
						<ul class='rem5-ul'>
						</ul>
						<div class='rem5'>
							<div class='rem5-row'></div>
							<div class='rem5-col'></div>
							<input class='rem5-file' capture='camera' multiple="multiple" type='file' />
						</div>
					</li>
				    <li class='li'>所在位置 <img class='img_2' src='../public/img/you.png'></li>
					<li class='li'>提醒谁看 <img class='img_2' src='../public/img/you.png'></li>
					<li class='li'>谁可以看 <img class='img_2' src='../public/img/you.png'></li>
				</ul>
			</div>
			<!-- 个人资料 -->
		    <div class='personal'>
				    <header class='header'>
					    <img class='left' src='../public/img/zuo.png' ontouchend='personal_One()'>
					    <span>个人信息</span>
				    </header>
				    <ul>
					    <li class='li_1' ontouchend='goUploadPhotoAsAvatar()'>
						    <span class='span_1'>头像</span>
						    <img  class='img headsrc' src='../public/img/head%20portrait.png'>
		             <img class='right img_2' src='../public/img/you.png'>
					    </li>
					    <li ontouchend='goChangename()'>
						    <span>昵称</span>
						    <span class='span_right nickname'></span>
							<img class='right' src='../public/img/you.png'>
						</li>
						<li>
							<span>拍一拍</span>
							<img  class='right' src='../public/img/you.png'>
						</li>
						<li ontouchend='goChangeuser()'>
							<span>账号</span>
							<img  class='right' src='../public/img/you.png'>
							<span class='span_right accountNumber'>111</span>
						</li>
						<li>
							<span>二维码名片</span>
							<img  class='right' src='../public/img/you.png'>
						</li>
						<li>
							<span>更多</span>
							<img class='right' src='../public/img/you.png'>
						</li>
						<li>
							<span>我的地址</span>
							<img class='right' src='../public/img/you.png'>
						</li>
						<li>
							<span>喵喵币</span>
							<img class='right' src='../public/img/you.png'>
						</li>
				   </ul>
				</div>  
				<!-- 修改上传头像 -->
                <div class='changename ' id='uploadPhotoAsAvatar'>
                    <header>
					   <img src='../public/img/zuo.png' ontouchend='uploadPhotoAsAvatar_p()'>
                  		<span>修改头像</span>
                 		<div class='submit'>保存</div>
                   	</header>
						<img class='bg'>
						<input type='file'>

                 
                    <p>好的头像可以让你的朋友更容易记住你</p>
                </div>
				<!-- 更改名称 -->
				 <div class='changename ' id='changename'>
					 <header>
						 <img src='../public/img/zuo.png' ontouchend='changename_p()'>
						 <span>更改名字</span>
						 <div>保存</div>
					 </header>
					 <input v-model='changenames'>
					 <p>好的名字可以让你的朋友更容易记住你</p>
				 </div>
				<!-- 更改账号 -->
				<div class='changename' id='changeuser'>
					<header>
						<img src='../public/img/zuo.png' ontouchend='changeuser_p()'>
						<span>更改账号</span>
						<div>保存</div>
					</header>
 				    <input v-model='changeuser' type='number'>
				    <p>好的名字可以让你的朋友更容易记住你</p>
				</div>
				<!-- 设置 -->
				<div class='quit'>
					<header class=header>
						<img class='img' src='../public/img/zuo.png' ontouchend='quit_One()'>
						<span>设置</span>
					</header>
					<ul>
						<li><span>账号安全</span><img src='../public/img/you.png'></li>
						<li><span>青少年模式</span><span>未开启</span><img src='../public/img/you.png'></li>
						<li><span>新消息提醒</span><img src='../public/img/you.png'></li>
						<li><span>勿扰模式</span><img src='../public/img/you.png'></li>
						<li><span>聊天</span><img src='../public/img/you.png'></li>
						<li><span>隐私</span><img src='../public/img/you.png'></li>
						<li><span>通用</span><img src='../public/img/you.png'></li>
						<li><span>帮助与反馈</span><img src='../public/img/you.png'></li>
						<li><span>插件</span><img src='../public/img/you.png'></li>
						<li><span>注销账号</span><img src='../public/img/you.png'></li>
				        <li><span>皮肤<input type='color' v-model='color_bg'></span></li>
						<li class='text_quit'><a @touchend='pushOut()'><span>退出登录</span></a></li>
					</ul>
				</div>
				<!-- //搜索页面 -->
				<div class='seofriendly'>
					<div class='header'>
						<input v-model='friendly' id='SEOfriendly'>
						<span ontouchend='seofriendly_One()'>取消</span>
					</div>
					<ul class='ul'>
						<li class='li' v-for='item in friendlylist'>
							<img class='img' src='../public/img/newF.png' :src=item.headSrc>
							<span class='span'>{{item.name}}<em class="em">{{item.identity}}</em></span>
						</li>
						
					</ul>
				</div>
				<!-- 加好友页面-->
				<div class='AddFriend'>
					<ul>
						<li><img  ontouchend='return_seofriendly()' src='../public/img/zuo.png' class='return-img'></li>
						<li class='li'>
							<img :src=Add_Friend_f.headSrc class='head-img'>
							<div class='data-div'>
								<div class='data-name' style='font-size:100px;'><em class='em'>{{Add_Friend_f.identity}}</em><b>{{Add_Friend_f.name}}</b></div>
								<div class='data-2'>昵称：{{Add_Friend_f.name}}</div>
								<div class='data-2'>账号：{{Add_Friend_f.user}}</div>
							</div>
						</li>
						<li class='li-input'><textarea placeholder='验证信息'></textarea></li>
						<li class='add'>
							<div>加好友</div>
						</li>
					</ul>
				</div>
			    <!-- 好友申请界面 -->
				<div class='FriendRequest'>
					<header class='header'>
					    <img  ontouchend='FriendRequest_One()' src='../public/img/zuo.png' class='r-img'>
					    <span>好友申请</span>
					</header>
					<ul>
						<li v-for='item in datalist.AddFriend' class='li'>
							<img :src=item.headSrc class='h-img'>
							<div class='show-r'>
							    <span class='f-name'>{{item.name}}<em class='em'>{{item.identity}}</em></span>
								<br>
								<p>你好:</p>
								<div class='f-data'>{{item.val}}</div>
								<div class='vuto'>不同意</div>
								<div class='consent'>同意</div>
							</div>
						</li>
					</ul>
				</div>
				<!-- 好友资料页面 -->
				<div class='Friendprofile' id='Friendprofile'>
                    <div class='header'>
					    <img class='r-img' src='../public/img/zuo.png' ontouchend='Friendprofile_One()' >
						<span ontouchend='godataSet()' class='f-right'>•••</span>
					
					</div>
                    <ul>
                        <li>
							<img class='f-img' :src='Friendprofile_0.headSrc'>
							<div class='f-box'>
								<div class='f-name'>{{Friendprofile_0.name}}<em class='em'>{{Friendprofile_0.identity}}</em></div>
								<div class='f-user'>账号:{{Friendprofile_0.user}}</div>
							</div>
						</li>
                        <li class='li'>设置备注和标签
							<img class='img' src='../public/img/you.png'>
						</li>
                        <li class='li'>朋友权限
							<img class='img' src='../public/img/you.png'>
						</li>
                        <li class='li'>朋友圈
							<img class='img' src='../public/img/you.png'>
						</li>
						<li class='li'>更多信息
							<img class='img' src='../public/img/you.png'>
						</li>
                        <li class='text send-session'>发消息</li>
					</ul>
				</div>
				<!-- 资料设置 -->
				<div class='Friendprofile' id='dataSet'>
                    <div class='header'>
					    <img ontouchend='dataSet_f()' class='r-img' src='../public/img/zuo.png' ontouchend='Friendprofile_One()' >
						<span>资料设置</span>
					</div>
                    <ul>
						<li class='li'>设置备注和标签
							<img class='img' src='../public/img/you.png'>
						</li>
                        <li class='li'>朋友权限
							<img class='img' src='../public/img/you.png'>
						</li>
                        <li class='li'>把她推荐给朋友
							<img class='img' src='../public/img/you.png'>
						</li>
						<li class='li'>添加到桌面
							<img class='img' src='../public/img/you.png'>
						</li>
						<li class='li'>设置备注和标签
							<img class='img' src='../public/img/you.png'>
						</li>
                        <li class='li'>设为新标朋友
						</li>
                        <li class='li'>加入黑名单
						</li>
						<li class='li'>投诉
							<img class='img' src='../public/img/you.png'>
						</li>
                        <li class='text de-friended'>删除</li>
					</ul>
				</div>
                <!-- 私聊页面 -->
                <div class='groupChat' id='groupChat'>
					<header>
						<a ontouchend='privateChat_One()'><img src='../public/img/zuo.png' class='left'></a>
						<span>{{Friendprofile_0.name}}</span>
						<span class='right'>•••</span>
					</header>
					<div class='newsDiv'>
						<div class='showDiv'>
							<ul>
								<li class='li my-right' v-for='item in private_list'>
									<div class='text'></div>
									<div>
										<img :src=item.headSrc class='img' :class='{"my-img":item.name==changenames}'>
										<div class='warp'>
											<div class='showname' :class='{"my-name":item.name==changenames}'>{{item.name==changenames?null:item.name}}</div>
											<div class='len' :class='{"before-left":item.name!=changenames,"before-right":item.name==changenames}'>
												<span class='showNews' :class='{"my-news":item.name==changenames}'>{{item.val}}</span>
											</div>
										</div>
									</div>
									
								</li>
							</ul>
							<!-- //一开始底部输入框，使用了固定定位，位置不受其他元素影响 -->
							<!-- 将显示的位置垫高了一点，避免输入框遮挡消息 -->
							<div class='top'></div>
						</div>
					</div>
					<footer>
						<img src='../public/img/langunge.png'>		
						<textarea class='input' v-model='private' ></textarea>	
						
						<div class='right'>
							<img src='../public/img/face_h.png' class='left' >
							<img src='../public/img/add.png' class='right' :class='{"hide":private_s}'>
							<div class='send' :class='{"show":private_s}'>发送</div>
						</div>
					</footer>
				</div>


		</div>
	</body>
	
</html>
<!-- 加载完毕 -->
<script src='../public/js/homePage.js'></script>
